<template>
	<view class="flex flex-row flex-row-top-start" style="flex-flow: row wrap" :style="[_width ? { width: _width + 'rpx' } : '']">
		<slot></slot>
	</view>
</template>

<script lang="ts" setup>
/**
 * 图片组
 * @description 注意它内部只能搭配图片组件tm-image才能正常。
 * @example 相册集例子
 * <tm-image-group>
		<tm-image :padding="[5,5]" preview :width="150" :height="150" :src="'https://picsum.photos/200/300?id='+item" v-for="item in 14" :key="item"></tm-image>
	</tm-image-group
 */
import { provide, computed } from 'vue'
interface imageItem {
	width: number
	height: number
	src: string
}
const props = defineProps({
	//默认为0,宽度自动。
	width: {
		type: [Number, String],
		default: 0
	}
})
const _width = computed(() => props.width)

const _catchList: Array<imageItem> = []
function pushKey(e: imageItem) {
	let index = _catchList.findIndex((el) => {
		return el.src == e.src
	})
	if (index > -1) {
		_catchList.splice(index, 1, e)
	} else {
		_catchList.push(e)
	}
}
defineExpose({ pushKey: pushKey, tmImageGroup: 'tmImageGroup' })
provide(
	'ImagGrupList',
	computed(() => {
		return _catchList.map((el) => el.src)
	})
)
</script>
<style></style>
